<template>
  <div class="counter-warp">
    <div class="bgdivcls" v-bind:class="{ hiddendiv : ishid }">
      <img class="bgcls" src="http://qiniuyun.bblog.site/dir11.png"/>
      <p class="bgp">NO TOPIC</p>
    </div>
    <ul class="container log-list" >
      <li v-for="(topic, index) in topics" :class="{ red: aa }" :key="index" class="log-item">
        <p class="p1class" @click="clickboard(topic.topicname)">&nbsp;&nbsp;{{ topic.topicname }}</p>
        <p class="p2class" @click="changerunstatus(topic.runstatus, topic.id, index)" >{{ topic.runstatus }}</p>
        <p class="pclass"  @click="updateRemark(topic.id, topic.remark, topic.topicname)">&nbsp;&nbsp;{{ topic.remark }}</p>
        <p class="p5class" @click="showReport(topic.id, topic.topicname)"><img src="http://qiniuyun.bblog.site/tubiao1.png" class="csimg2"/></p>
        <hr class="hrcls">

        <p class="p3class" @click="showToast('主题接收消息数量：' + topic.numbers)" ><img src="http://qiniuyun.bblog.site/cs.png" class="csimg"/> <span class="sumcls"> {{ topic.numbers }}</span></p>
        <p class="p3class" @click="showToast('主题分区数量：' + topic.partitionsum)" ><img src="http://qiniuyun.bblog.site/fenqu3.png" class="csimg"/> <span class="sumcls"> {{ topic.partitionsum }}</span></p>
        <p class="p3class" @click="showToast('主题副本数量：' + topic.replicationsum)" ><img src="http://qiniuyun.bblog.site/beifen.png" class="csimg"/> <span class="sumcls"> {{ topic.replicationsum }}</span></p>
        <p class="p4class"  @click="showToast('创建时间 ' + topic.createtime)" >{{ topic.createtime }}</p>
      </li>
    </ul>
    <a href="/pages/topicmanager/add/main" class="counter">添加TOPIC</a>
    <mptoast />
  </div>

</template>

<script>
import { requestPost } from '@/utils/index'
import mptoast from 'mptoast'
export default {
  components: {
    mptoast
  },
  data () {
    return {
      topics: [],
      ishid: false,
      pageNo: 1,
      runstatus: '运行'
    }
  },
  onLoad () {
    wx.setNavigationBarTitle({
      title: 'TOPIC'
    })
  },
  onReachBottom () {
    this.pageNo = this.pageNo + 1
    this.getTopicList()
  },
  onShow () {
    this.topics = []
    this.pageNo = 1
    this.getTopicList()
  },
  methods: {
    getTopicList () {
      wx.showLoading({
        title: '数据加载中',
        mask: true
      })
      var that = this
      var data = {
        'openid': wx.getStorageSync('openid'),
        'pageNo': this.pageNo,
        'rowCount': 20
      }
      requestPost(wx.getStorageSync('requestUrl') + '/wxsys/getTopicsbyopenid', data, 'POST').then(function (value) {
        for (var ele of value.data.tplist) {
          if (ele.remark === null || ele.remark === '') {
            ele.remark = '您还未添加主题备注'
          }
          // ele.runstatus = '运行'
          that.topics.push(ele)
        }
        // console.log(that.topics)
        wx.setStorageSync('tppre', value.data.tppre)
        if (that.topics.length !== 0) {
          that.ishid = true
        }
        wx.hideLoading()
      }, function (value) {
        wx.hideLoading()
        console.log(value)
      })
    },
    showToast (str) {
      this.$mptoast(str)
    },
    changerunstatus (rs, tid, index) {
      var that = this
      if (rs === '运行') {
        wx.showModal({
          title: '温馨提示',
          content: '停止后主题将无法生产消息，确定吗？',
          success: (res) => {
            if (res.confirm) {
              var data = {
                "pageNo": "1",
                "rowCount": 30,
                "obj": {
                  "topicid": tid,
                  "topicstatus": 0
                }
              }
              requestPost(wx.getStorageSync('requestUrl') + '/wxsys/updateTopicStatus', data, 'POST').then(function (value) {
                that.topics[index].runstatus = '停止'
              }, function (value) {
                console.log(value)
              })
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        })
      } else {
        var data = {
          "pageNo": "1",
          "rowCount": 30,
          "obj": {
            "topicid": tid,
            "topicstatus": 1
          }
        }
        requestPost(wx.getStorageSync('requestUrl') + '/wxsys/updateTopicStatus', data, 'POST').then(function (value) {
          that.topics[index].runstatus = '运行'
        }, function (value) {
          console.log(value)
        })
      }
    },
    updateRemark (id, remark, topicname) {
      wx.navigateTo({
        url: '/pages/topicmanager/edit/main?id=' + id + '&remark=' + remark + '&topicname=' + topicname
      })
    },
    showReport (id, topicname) {
      wx.navigateTo({
        url: '/pages/topicmanager/topicinfo/main?id=' + id + '&topicname=' + topicname
      })
    },
    clickboard (topic) {
      var that = this
      wx.setClipboardData({
        data: topic,
        success (res) {
          wx.getClipboardData({
            success (res) {
              wx.hideToast()
              wx.showToast({
                title: '复制TOPIC成功',
                icon: 'success',
                duration: 2000
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style>
html,body,#app {
  background-color: #eee;
}
.hiddendiv{
  display: none;
}
.bgdivcls{
  text-align: center;
  padding-top: 80px;
}
.bgcls{
  width: 150px;
  height: 130px;
}
.bgp{
  color: rgba(185, 194, 194, 0.623);
}
.hrcls{
  float: left;
  width: 95%;
  margin-top: 5px;
  border: 0.3px dashed rgba(146, 138, 138, 0.212);
}

.p1class{
  float: left;
  border: 0px solid red;
  width: 87%;
  margin-top: 14px;
  font-size: 20px;
  font-weight: bold;
}
.p2class{
  float: left;
  background-color: rgb(119, 228, 119);
  border: 0px solid rgb(230, 126, 126);
  margin-top: 14px;
  text-align: center;
  width: 30px;
  height: 25px;
  line-height: 25px;
  font-size: 13px;
  border-radius: 20%;
}
.pclass{
  float: left;
  width: 87%;
  height: 30px;
  margin-top: 9px;
  font-size: 16px;
  line-height: 30px;
  color: rgba(66, 66, 65, 0.596);
  border: 0px solid red;
}
.p5class{
  float: left;
  border: 0px solid rgb(99, 57, 57);
  margin-top: 9px;
  width: 30px;
  height: 30px;
}
.csimg2{
  float: left;
  width: 30px;
  height: 30px;
  border: 0px solid yellow;
}
.p3class{
  margin-top: 10px;
  margin-bottom: 5px;
  float: left;
  width: 20%;
  font-size: 13px;
  color: rgba(66, 66, 65, 0.596);
  border: 0px solid red;
}
.p4class{
  margin-top: 10px;
  margin-bottom: 5px;
  float: right;
  width: 35%;
  font-size: 13px;
  color: rgba(66, 66, 65, 0.596);
  border: 0px solid red;
  white-space:nowrap;
  text-overflow:ellipsis;
  -o-text-overflow:ellipsis;
  overflow: hidden;
}
.csimg{
  float: left;
  margin-left: 9px;
  width: 20px;
  height: 20px;
  border: 0px solid yellow;
}
.sumcls{
  float: left;
  width: auto;
  height: 20px;
  line-height: 20px;
  border: 0px solid yellow;
}
.counter {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  color: rgb(0, 0, 255);
  font-weight: 700;
  background-color: rgb(255, 255, 255);
  border-top: 1px solid rgba(155, 153, 153, 0.315);
  text-align: center;
  position: fixed;
  bottom: 0px;
}
.counter-warp {

}

.log-list {
  padding-top: 0px;
}

.log-item {
  width: 97%;
  margin-top: 5px;
  background-color: rgb(255, 255, 255);
  border-radius: 10px 10px 10px 10px;
  margin-left: 0.4%;
}

</style>
